<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>

    <!-- Vue.directive(name,config):创建一个指令
    inserted(el,binding):当页面的DOM元素使用该指令时，就会执行该函数 
        el:当前DOM元素
        binding:一个对象，包换指令的value值等信息 -->

    <div id="box">
        <div v-dir>hello directive</div>
        <!-- 指令的值如果不加引号，vue会以变量来处理 -->
        <div v-dir=" 'orange' ">hello directive</div>
        <div v-dir=" 'yellow' ">hello directive</div>
        <!-- color为变量 -->
        <div v-dir=" color ">hello directive</div>

    </div>
    <script>
        //创建了一个指令dir
        Vue.directive("dir", {
            inserted(el, binding) {
                el.style.background = binding.value ? binding.value : "red"
            }
        })
        new Vue({
            el: "#box",
            data: {
                color: "#ccc"
            }
        })
    </script>
</body>

</html>